import React,{ useState,useEffect } from 'react'
import { Address, Cell } from '@nutui/nutui-react'
import { Button } from '@nutui/nutui-react'
import sheng from '../quyu/sheng.json'
import shi from '../quyu/city.json'
import qu from '../quyu/xian.json'
import { Picker,Cascader } from '@nutui/nutui-react'
import { useLocation } from 'react-router-dom'
import axios from 'axios'


export default function SJ(){
  const [isVisibleDemo1, setIsVisibleDemo1] = useState(false)
  const [value1, setValue1] = useState([])
  const [visible, setVisible] = useState(false)
  const [citylist,setcity] = useState([])
  const [sheng1,setlist] = useState('')
  const [user, setuser] = useState({})
  const location = useLocation()
  const _id = useLocation().search.split('=')[1]


  function handlecity() {
    // 构建省份包含市，市包含区的嵌套数据结构
    const updatedSheng = sheng.map((shengItem) => {
      let newShengItem = {...shengItem};
      newShengItem.children = [];
      // 遍历市数据，查找对应省份的市并添加到省份的 children 数组中
      shi.forEach((shiItem) => {
        if (shiItem.provinceCode === shengItem.code) {
          let newShiItem = {...shiItem};
          newShiItem.children = [];
          // 遍历区数据，查找对应市的区并添加到市的 children 数组中
          qu.forEach((quItem) => {
            if (quItem.cityCode === shiItem.code) {
              newShiItem.children.push(quItem);
            }
          });
          newShengItem.children.push(newShiItem);
        }
      });
      return newShengItem;
    });

    // 将处理好的包含多层嵌套数据的数组赋值给 citylist 状态
    setcity(updatedSheng);
  }

  const [addform, setaddform] = useState({
    name:'',
    phone:'',
    address:'',
    user_id:_id
  })


  useEffect(()=>{
    handlecity()
  },[sheng,shi,qu])




  const change1 = (value, path) => {
    console.log('onChange', value, path)
    setValue1(value)
    setaddform({
      ...addform,
      address:value.join('')
    })
  }
  console.log(value1)





  function handleChange(e){
    setaddform({
      ...addform,
      name:e.target.value
    })
  }
  function handleChange1(e){
    setaddform({
      ...addform,
      phone:e.target.value
    })
  }

  function handleClick(){
    // console.log(addform)
    axios.post('http://localhost:3500/addddd',addform).then(res=>{
      window.location.href=`/app/jzw?_id=${_id}`
    })
  }


  return (
    <div>
      <div style={{width:'100%',height:'50%',borderRadius:'10px',backgroundColor:'#FAFAFA',margin:'0 auto',marginTop:'50px'}}>
        <h4>收件人</h4>
        <p style={{textAlign:'center'}}>
          <input type="text" placeholder="真实姓名" style={{width:'100px',height:'30px',border:'0'}} onChange={handleChange}/>
          <input type="text" placeholder="手机/座机" style={{width:'100px',height:'30px',border:'0'}} onChange={handleChange1}/>
        </p>
        <hr style={{width:'80%'}}/>
        <p>
        <Cell
          title="选择地址"
          description={value1.length ? value1 : '请选择地址'}
          onClick={() => {
            setIsVisibleDemo1(true)
          }}
        />
        </p>
      <p style={{textAlign:'center',marginTop:'20px'}}>
        <Button>选择地址</Button>
        <Button onClick={handleClick} >存储地址</Button>
      </p>
      </div>
      <Cascader
        popupProps={{
          className: 'cascader-popup',
        }}
        visible={isVisibleDemo1}
        value={value1}
        title="选择地址"
        options={citylist}
        optionKey={{
          textKey: 'name',
          valueKey: 'name',
          childrenKey: 'children',
        }}
        closeable
        onClose={() => {
          setIsVisibleDemo1(false)
        }}
        onChange={change1}
      />
    </div>
  )
}
